<template>
	<view>
		<template v-if="isLoading">
			<x-loading></x-loading>
		</template>
		<template v-else-if="!isLoading && hasData">
			<!-- 设置导航栏样式 -->
			<view class="nav" :style="'height:'+device.navigationBarHeight+'px;'+(navAlpha>=1 ? 
			'  background-color: rgba(255, 255, 255,'+navAlpha+'); color:#333;' : 
			'  color: #333;'   )">
				<view class="menu">
					<view class="search" @click="onSearch">
						<u-icon name="search" :color="navAlpha>=1?'#333':'#333'" size="32"></u-icon>
					</view>
					<view class="title">枣能.喝出健康</view>
				</view>
			</view>

			<scroll-view class="content"
				:style="{height: (device.screenHeight-(device.tabBarHeight+device.navigationBarHeight))+'px', 'margin-top': device.navigationBarHeight+'px;'}"
				:scroll-y="true" @scroll="onScroll" refresher-default-style="black" :refresher-enabled="true"
				:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
				
				<view class="notice">
				    <u-notice-bar :text="notice" mode="closable"></u-notice-bar>
				</view>
				<swiper style="height:360rpx" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" v-if="banner.length>0">
					<swiper-item v-for="i in banner" :key="i.pictureUrl">
						<view class="banner_item">
							<image :src="imageUrl+i.pictureUrl" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- <x-introduce ref="introduceRef"></x-introduce> -->
				<view class="column">
					<view v-for="(item,index) in columnList" :key="index">
						<view class="column_title">{{item.name}}</view>
						
						<swiper style="height:750rpx" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item v-for="i in item.itemDetail" :key="i.pictureUrl">
								<view class="banner_item" style="height: 750rpx;" @click="onNavigate(i)">
									<image :src="imageUrl+i.pictureUrl" mode="widthFix"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<x-goods-home-list title="新款来袭" :goods="goodGoods"></x-goods-home-list>
				<x-goods-home-list title="君王之礼" :goods="topGoods"></x-goods-home-list>
				<x-goods-home-list title="青春记忆" :goods="shopGoods"></x-goods-home-list>
				<x-goods-home-list title="潇洒人生" :goods="goodsRecommend4"></x-goods-home-list>

				<view class="seperate-line"></view>
			</scroll-view>

			<x-side-bar ref="sideBarRef" class="x-side-bar"></x-side-bar>

			<view class="pop-win" v-if="showPrize"
				:style="{height:(device.windowHeight)+'px', 'padding-top':device.navigationBarHeight+'px'}">
				<view class="mask"></view>
				<view class="box" :animation="boxAnimationData">
					<view class="side front"></view>
					<view class="side back"></view>
					<view class="side left"></view>
					<view class="side right"></view>
					<view class="side top">
						<view class="top-view tl" :animation="tlAnimationData"></view>
						<view class="top-view tr" :animation="trAnimationData"></view>
					</view>
					<view class="side bottom"></view>
				</view>
			</view>

			<u-modal :show="showQRCodeInvalid" title="提示"
				@cancel="()=> {showQRCodeInvalid = false; qrCodeInvalidMsg = ''}"
				@confirm="()=> {showQRCodeInvalid = false; qrCodeInvalidMsg = ''}" cancelText="关闭"
				:showCancelButton="true">
				<view class="slot-content">
					<view class="prize_tex">{{qrCodeInvalidMsg}}</view>
				</view>
			</u-modal>

		</template>
		<template v-else>
			<x-empty class="x-empty" :retry="true" @refresh="onEmptyRefresh"
				:height="device.screenHeight-device.tabBarHeight"></x-empty>
		</template>
	</view>
</template>

<script>
	import {
		getHome
	} from '@/api/home.js'
	
	import {
		mapState
	} from 'vuex'
	import {
		deepClone
	} from '@/libs/function/deepClone.js'

	import EventBusMacro from '@/plugins/EventBus/eventBusMacro.js'
	import XIntroduce from './components/xIntroduce.vue'
	import XGoodsHomeList from './components/xGoodsHomeList.vue'
	import XSideBar from './components/xSideBar.vue'
	import XImage from '@/components/image/xImage.vue'
	export default {
		components: {
			XIntroduce,
			XGoodsHomeList,
			XSideBar,
			XImage,
		},
		computed: {
			...mapState(['partnerInfo', 'userInfo', 'device']),
			isLaunchMP() {
				return !this.hasData //只要有一次请求到数据，就不需要加载品牌logo动画， 否则就需要
			}
		},
		data() {
			return {
				notice:'',
				banner:[],
				columnList:[],
				hasData: false,
				isLoading: true,
				navAlpha: 0,

				firstRecommendProduct: null, //获取首页首个推荐产品，把这个对象的图片作为朋友圈的分享图
				result: '',
				showPrize: false,
				prize: {},

				bottleQRCode: 'https://kingleber.cn/offline/scanbottle/',
				partnerQRCode: 'https://kingleber.cn/profile/qrcode/',
				// token: '',
				// showLogin: false,

				goodGoods: [], //新款来袭
				topGoods: [], //君王之礼
				shopGoods: [], //青春记忆
				goodsRecommend4: [], //潇洒人生

				imageUrl: this.$Config.imageUrl,
				staticUrl: this.$Config.staticUrl,

				prizeWrapperWidth: 0, //中奖弹窗背景图,在盒子里面的宽度


				// role: '用户',
				onlineCustomer: {
					'width': '76rpx',
					'height': '76rpx',
					'border-radius': '38rpx',
					'z-index': '100',
					'font-size': '26rpx',
					'text-align': 'center',
					'position': 'fixed',
					'right': '10rpx',
					'bottom': '5%',
					'background-color': '#F5F5F5'
				},
				shareCustomer: {
					'width': '76rpx',
					'height': '76rpx',
					'border-radius': '38rpx',
					'z-index': '100',
					'font-size': '26rpx',
					'text-align': 'center',
					'position': 'fixed',
					'right': '10rpx',
					'bottom': '15%',
					'background-color': '#F5F5F5'
				},


				showQRCodeInvalid: false,
				qrCodeInvalidMsg: '',

				introduceHeight: 0, //介绍区域高度

				designScreenWidth: 375,
				designGoodGoodsHeight: 350,
				goodGoodsHeight: 0, //好物推荐区域高度

				boxAnimationData: null,
				tlAnimationData: null,
				trAnimationData: null,
				prizeWinAnimationData: null,
			}
		},

		onLoad(options) {
			
			this.goodGoodsHeight = this.designGoodGoodsHeight * 1.0 / this.designScreenWidth * this.device.screenWidth

			if (options.key === this.$TOOLS.SHARE.SHARE_STYLE.PAGE) {
				let {
					params,
					target
				} = this.$TOOLS.SHARE.decodeShareParameter(this.$TOOLS.SHARE.SHARE_STYLE.PAGE, options)
				if (target == this.$TOOLS.SHARE.TARGET_MYSELF) {
					let invitationCode = params.invitationCode || ''
					let myInvitationCode = this.userInfo.invitationCode || ''
					if (myInvitationCode != invitationCode && invitationCode != '') {
						this.$store.commit('SET_INVITATION_CODE', invitationCode);
					}
				}
			}

			this.loadData()
		},
		methods: {
			onNavigate(e){
				if(e.type == 3){
					wx.navigateTo({
						url:'/pages/index/detail?id='+e.jumpUrl,
					})
				}
				if(e.type == 1){
					wx.navigateTo({
						url:e.jumpUrl,
					})
				}
				if(e.type == 2){
					wx.navigateTo({
						url:'/pages/external/index?link='+e.jumpUrl,
					})
				}
			},
			emitIntroduceHeight(height) {
				this.introduceHeight = height
			},


			loadData() {
				this.launchRequest()
			},
			
			onScroll(e) {
				let scrollTop = e.detail.scrollTop

				if (this.$refs.introduceRef) {
					this.$refs.introduceRef.setOffsetTop(scrollTop - this.device.navigationBarHeight)
				}

				let threshold = this.device.windowHeight - this.device.navigationBarHeight
				if (scrollTop > threshold) {
					this.navAlpha = 1
				} else {
					this.navAlpha = scrollTop / threshold;
				}
			},
			onRefresh() {
				// 下拉刷新
				if (!this.isLoading) {
					this.isLoading = true

					const threshold = 2000
					const startTime = new Date()
					this.launchRequest()
					const endTime = new Date()
					// 时差（毫秒为单位）
					const timeDiff = endTime - startTime
					if (timeDiff > threshold) {
						this.isLoading = false
					} else {
						setTimeout(() => {
							this.isLoading = false
						}, threshold - timeDiff)
					}
				}
			},

			onEmptyRefresh() {
				this.launchRequest()
			},


			toGoods(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/index/detail?id=' + e
				})
			},
			onSearch() {
				uni.navigateTo({
					url: '/pages/classNav/search'
				});
			},
			launchRequest(e) {
				this.isLoading = true
				this.$showLoading();

				getHome().then(res => {
					this.isLoading = false
					this.$hideLoading();
					this.$nextTick(() => {
						if (this.$refs.introduceRef) {
							this.$refs.introduceRef.setOffsetTop(-this.device.navigationBarHeight)
						}

					})

					const list = res;
					this.hasData = list && list.length > 0 ? true : false
					console.log('首页数据',res)
					this.notice = res[0].content;
					this.banner = res[1].itemDetail;
					const columnList = res;
					columnList.splice(0,2)
					this.columnList = columnList;
				}).catch(err => {
					this.isLoading = false
					this.$hideLoading();
				})

			},

			_share(type) {
				let encodeParameter = this.$TOOLS.SHARE.encodeShareParameter(this.$TOOLS.SHARE.SHARE_STYLE.PAGE, this
					.$TOOLS.SHARE.TARGET_MYSELF, {
						invitationCode: this.userInfo.invitationCode
					})

				return {
					title: this.$Config.title,
					path: `/pages/index/home?` + encodeParameter,
					imageUrl: this.staticUrl + 'share/home.png?t=' + Date.now()
				};
			}
		},


		onShareAppMessage() {
			return this._share(0)
		},

		onShareTimeline() {
			return this._share(1)
		},
	}
</script>

<!-- 中奖弹窗 -->
<style lang="scss" scoped>
	.notice{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
	}
	.banner_item{
		width: 100%;
		height: 100%;
		overflow: hidden;
		
		&>image{
			width: 100%;
		}
	}
	.column_title{
		margin: 50rpx auto 20rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}
	.pop-win {
		position: absolute;
		z-index: 99999;
		perspective: 1000px; // 设置透视视角，使得元素在3D空间中可以有立体感
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		.mask {
			position: absolute;
			// margin-top: -550rpx;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.box {
			width: 100px;
			height: 100px;
			// background-color: blue;
			transform-style: preserve-3d;
			perspective: 1000px;
			transform: rotateX(-20deg);
			z-index: 100;
			position: absolute;


			/* 箱子各个面的统一样式 */
			.side {
				/* 绝对定位 */
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: #c09551;
				border: 1px solid #e4c084;
			}

			/* 前 */
			.front {
				transform: translateZ(50px);
			}

			/* 后 */
			.back {
				transform: translateZ(-50px) rotateY(180deg);
			}

			/* 左 */
			.left {
				transform: translateX(-50px) rotateY(-90deg);
			}

			/* 右 */
			.right {
				transform: translateX(50px) rotateY(90deg);
			}

			/* 上 */
			.top {
				transform: translateY(-50px) rotateX(90deg);
				background-color: transparent;
				transform-style: preserve-3d;
			}

			.top-view {
				background-color: #c09551;
				position: absolute;
				top: 0;
				width: 50%;
				height: 100%;
				border: 1px solid #e4c084;
				/* 设置过渡 */
				transition: 0.5s;


			}

			.tl {
				left: 0;
				/* 设置旋转的基点位置为左边 */
				transform-origin: left;
			}

			.tr {
				right: 0;
				/* 设置旋转的基点位置为右边 */
				transform-origin: right;
			}

			/* 下 */
			.bottom {
				transform: translateY(50px) rotateX(-90deg);
				/* 阴影 */
				box-shadow: 5px -5px 15px rgba(0, 0, 0, 0.4);
			}

		}

		.prize-win {
			width: 100px;
			height: 100px;
			display: flex;
			justify-content: center;

			.prize-wrapper {
				position: relative;
				// display:flex;

				// justify-content: center;
				// align-items: center;

				.prize-bg {
					// margin-top: 5rpx;
					max-height: 100%;
					max-width: 100%;
					position: absolute;
					top: 0px;
					left: 0px;
					left: 50%;
					transform: translatex(-50%);
				}

				.prize-img {
					margin-top: 32rpx;
					max-height: 40%;
					max-width: calc(100% - 20rpx);
					position: relative;
					left: 50%;
					-webkit-transform: translatex(-50%);
					transform: translatex(-50%);
				}

				.prize-text {
					font-size: 12rpx;
					text-align: center;
					vertical-align: middle;
					position: absolute;
					margin: 5rpx;
					color: whitesmoke;
					width: calc(100% - 10rpx);
				}

				.bottom-btn {
					margin-top: 5rpx;
					display: flex;
					position: absolute;
					width: 100%;
					bottom: 15rpx;
					font-size: 16rpx;
					justify-content: center;

					.confirm {
						width: 100%;
						border-left: 1px solid #999;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang-SC-Regular;
						color: rgba(255, 213, 129, 1);
					}
				}
			}
		}
	}
</style>

<!-- 侧边栏按钮 -->
<style lang="scss" scoped>
	.x-side-bar {
		width: 100rpx;
		position: absolute;
		right: 30rpx;
		bottom: 10rpx;
	}
</style>

<style lang="scss" scoped>
	.good-title,
	.top-title,
	.shop-title {
		font-size: 40rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		color: #2D2D2D;
		display: flex;
		justify-content: center;
		border-top: 1px;
		margin: 30rpx 0;
	}
</style>

<style lang="scss" scoped>
	@import '@/mixins/theme/xTheme.scss';

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 750rpx;
		// background-color: $x-content-background;

		.item-left {
			width: 335rpx;
			height: 550rpx;
			border-radius: 16rpx;
			margin: 20rpx 8rpx 0 32rpx;
			background-color: white;
			display: inline-block;
		}

		.item-right {
			width: 335rpx;
			height: 550rpx;
			border-radius: 16rpx;
			margin: 20rpx 32rpx 0 8rpx;
			background-color: white;
			display: inline-block;
		}

		.item-content {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			position: relative;
			height: 100%;

			.img-container {
				width: 100%;
				height: 350rpx;
				position: relative;
				overflow: hidden;

				.x-image {
					display: flex;
					justify-content: center;
					align-item: center;
					width: 100%;
				}

				.sale-out-mask {
					position: absolute;
					left: 50%;
					top: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					background-color: rgba(255, 255, 255, 0.7);
					display: flex;
					width: 100%;
					height: 100%;
					justify-content: center;
					align-items: center;
					color: #999;
					font-weight: 500;
				}
			}

			.item-name {
				font-size: 25rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #2D2D2D;
				line-height: 36rpx;
				margin: 10rpx 10rpx 0;
			}

			.item-sale-num-info {
				height: 31rpx;
				font-size: 22rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #B0B0B0;
				line-height: 31rpx;
				margin: auto 10rpx;
				position: absolute;
				bottom: 76rpx;
			}

			.item-footer {
				display: flex;
				position: absolute;
				bottom: 16rpx;
				margin: auto 10rpx;
				width: calc(100% - 20rpx);
				justify-content: space-between;
				align-items: center;

				.price {
					display: flex;
					align-items: flex-end;

					.symbol {
						height: 36rpx;
						font-size: 25rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #E5412D;
						line-height: 36rpx;
					}

					.value {
						margin-left: 2rpx;
						height: 45rpx;
						font-size: 33rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #E5412D;
						line-height: 45rpx;
					}
				}

				.estimate {
					display: flex;
					align-items: baseline;
					font-size: 26rpx;
					color: #f56c6c;
					margin-right: 20rpx;
					padding: 4rpx;
					background-color: #f92d1820;
					border-radius: 2rpx;

					.desc {
						height: 25rpx;
						font-size: 15rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						line-height: 25rpx;
					}

					.symbol {
						height: 30rpx;
						font-size: 20rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #E5412D;
						line-height: 30rpx;
					}

					.value {
						margin-left: 2rpx;
						height: 35rpx;
						font-size: 25rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #E5412D;
						line-height: 35rpx;
					}
				}
			}
		}

	}
</style>

<style lang="scss" scoped>
	.x-empty {
		width: 100%;
	}
</style>

<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";

	.nav {
		color: white;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		right: 0rpx;
		width: 100%;
		z-index: 1;


		.menu {
			display: flex;
			height: 100%;
			align-items: flex-end;

			.scan {
				padding: 20rpx 10rpx 16rpx 20rpx;
			}

			.search {
				padding: 20rpx 20rpx 16rpx 10rpx;
			}

			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 26rpx;
				font-family: PingFang-SC-Bold;
				font-size: 36rpx;
				text-transform: uppercase;
				text-decoration: none;
				letter-spacing: 4.3px;
				font-weight: 500;
				font-style: normal;
				line-height: 1em;
				text-align: center;
			}
		}

	}

	.content {
		position: absolute;
		top: 0;
		left: 0;
		background: transparent;

		.swiper {
			margin: 20rpx 32rpx 0rpx;
		}

		.footer-box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;

			.enterprise-introduce {
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #2D2D2D;
				margin: 30rpx 20rpx;
				border-radius: 8rpx;
				background-color: white;
				color: #2D2D2D;
				font-family: PingFang-SC-Medium;
				font-size: 26rpx;
				width: 100%;
				height: 80rpx;
			}
		}

		.seperate-line {
			height: 1rpx;
			background-color: transparent;
		}

	}
</style>

<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";

	.layout {
		position: relative;
		top: 5px;
		left: 0px;
		display: flex;
		padding: 0px 15rpx;

	}

	.layout .text {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 5px;
	}

	.new-member-gift {
		position: fixed;
		z-index: 9999;
		bottom: 35%;
		right: 10rpx;
		width: 76rpx;
		border-radius: 36rpx;
		background-color: #F5F5F5;
	}

	.ic_gift {
		position: fixed;
		z-index: 9999;
		bottom: 25%;
		right: 10rpx;
		width: 76rpx;
		border-radius: 36rpx;
		background-color: #F5F5F5;
	}

	.goods_list {
		text-align: center;
		margin: 50rpx 32rpx 0rpx;
	}

	.goods_list_title {
		font-size: 40rpx;
	}

	.goods_list_text {
		margin-bottom: 20rpx;
	}

	.goods_item {
		background: #fff;
		width: 300rpx;
		height: 440rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);
		border: 2rpx solid #F5F5F5;
	}

	.goods_item_img {
		width: 100%;
		overflow: hidden;
		height: 260rpx;
	}

	.goods_item_img>image {
		width: 100%;
	}

	.goods_item_name {
		padding: 20rpx;
		color: #515151;
		font-size: 28rpx;
		height: 120rpx;
	}

	.add_car {
		display: inline-block;
		margin: 0 auto;
		border-radius: 100%;
		color: #e1251b;
	}

	.header {
		width: 100%;
		background: $x-background;
		padding: 200rpx 30rpx 50rpx;
	}

	.header_title {
		font-weight: bold;
		color: #fff;
		font-size: 34rpx;
		margin-bottom: 10rpx;
	}

	.header_text {
		color: #fff;
		margin-bottom: 10rpx;
	}
</style>